import React,{Component} from 'react';
// import './App.css';

//声明组件  组件return的一个是一个标签，只要多于一个标签，要在外出套一个标签
// 函数式组件：16.8之前也叫作UI组件，或木偶组件
const Header = (props)=>{
  console.log(props)
  return <header>{[1,2,3,4]}这是标题{props.title}</header>
}
//循环渲染
const Content = (props)=>{
  return <ul>
    {
      props.data.map(item=>{
        return <li>{item}</li>
      })
    }
  </ul>
}

// const Footer = ()=>{
//   return <footer>这是页尾</footer>
// }
class Footer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      time:new Date().toLocaleTimeString(),
      a:0,
      b:''
    }
    this.timer = setInterval(()=>{
      this.setState({time:new Date().toLocaleTimeString()})
    },1000)
  } 
  //组件卸载时执行（只执行一次）
  componentDidCatchWillUnmount(){
    clearInterval(this.timer);
  }
  //挂载成功（只执行一次），发请求的好地方
  componentDidMount(){
    console.log('didmount')
  }
  // 更新阶段（一更新就执行）
  shouldComponentUpdate(){
    console.log('shouldUpdate');
    return true;
  }
  componentDidUpdate(){
    console.log('didupdate')
  }
  render(){
    console.log('render')
    return <div>
      <h2>{this.state.time}</h2>
      <footer>这是页尾(类组件形式){this.props.data}</footer>
    </div> 
  }
}

class Demo extends React.Component{
  constructor(){
    super();
    this.state = {title:'事件绑定'}
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    console.log('click');
    this.setState({title:'new title'})
  }
  handleClick2 = ()=>{
    this.setState({title:'new title2'})
    console.log('click');
  }
  render(){
    return  <div>
      <h2>{this.state.title}</h2>
      <button onClick={this.handleClick}>更新状态</button>
      <button onClick={this.handleClick2}>更新状态2</button>

    </div>
  }
}

function App() {

  return (
    <div>
      <Demo/>
      <Header title='React'/>
      hello world 
      <div>
        <Header  title="内容标题"/>
        content
        <Content data={['a','b','c']}/>
      </div>
      <Footer data="尾部内容" />
      {/* { <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> } */}
    </div>
  );
}

export default App;